<template>
	<view class="page">
		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<u-empty v-if="couponList==0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"/>
			<view class="list" v-for="(item,index) in couponList" :key="index">
				<view class="list-data">
					<view class="coupon-info">
						<view class="info-title">
							<view class="title"><text>{{item.title}}</text></view>
						</view>
						<view class="coupon-way">仅小程序使用</view>
						<view class="date-get">
							<view class="date">
								<text v-if="item.startDay">
								{{item.startDay}}-{{item.endDay}}
								</text>
								<text v-else>
									有效期{{item.validity}}天
								</text>
							</view>

						</view>
						<view class="coupon-detail" @click="isDes(index)">
							详情信息<text class="coupon-jt G-font g-arrow-down" :class="{'on':current==index}"></text>
						</view>
					</view>

					<view class="coupon-price">
						<view class="discounts">
							<text class="min">￥</text>
							<text class="max">{{item.money}}</text>
						</view>
						<view class="get" @click="onCouponUse(item)">
							<text>立即领取</text>
						</view>
						<view class="full-reduction"><text>{{item.ruleRemark}}</text></view>
						<view class="jag"></view>
					</view>
				</view>
				<view
					style="margin: 0 20rpx;font-size: 20rpx;padding: 10rpx;background-color: #ffffff;color: #909399;border-radius: 8rpx ;"
					v-if="current==index">
					<view>
						<view>使用方式：{{item.title}}</view>
						<view>使用范围：仅{{item.shopName}}使用</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabShow: 0,
				couponList:[],
				current:null
			};
		},
		onLoad() {
			this.loadCouponList();
		},
		methods: {
			isDes(i){
				if(this.current==i){
					this.current=null;
				}else{
					this.current=i;
				}
			},
			loadCouponList() {
				const params={
					pageNo:"1",
					pageSize:"10"
				}
				this.$Request.post(this.$api.coupon.getCouponList,params).then(res => {
					this.couponList=[...this.couponList, ...res.data];
				})
			},
			/**
			 * 优惠券tab点击
			 * @param {Number} type
			 */
			onCouponTab(type) {
				this.TabShow = type;
			},
			/**
			 * 去使用点击
			 */
			onCouponUse(v) {
				this.$Request.get(this.$api.coupon.putCoupon,{id:v.id}).then(res => {
					if(res.data){
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '领取成功'
						});
					this.couponList=[];	
					this.loadCouponList();	
					}
				})
				
			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>
